<template>
  <div class="device-defect">
    <div class="breadcrumb-container">
      <!-- Breadcrumb 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备档案</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <h1 class="title">设备查询</h1>
    </div>

    <!-- 查询条件部分 -->
    <el-form :model="query" class="query" inline>
      <!-- 查询条件输入框 -->
      <el-form-item label="设备编码">
        <el-input v-model="query.id"></el-input>
      </el-form-item>

      <el-form-item label="设备名称">
        <el-input v-model="query.name"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="query.major"></el-input>
      </el-form-item>



      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="danger" @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="m1">查询</el-button>
        <el-button type="primary" @click="dialogVisible = true">新建设备</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" width="500px" center>
    <div class="dialog-content">
      <el-form ref="form" :model="equipment" label-width="120px" @submit.prevent="submitForm" enctype="multipart/form-data">
        <el-form-item label="设备名称">
          <el-input type="text" v-model="equipment.name" placeholder="设备名称"></el-input>
        </el-form-item>
        <el-form-item label="设备单位">
          <el-input type="text" v-model="equipment.unit" placeholder="设备单位"></el-input>
        </el-form-item>
        <el-form-item label="专业范围">
          <el-input type="text" v-model="equipment.major" placeholder="专业范围"></el-input>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload class="upload-demo" action="" :on-change="onFileChange">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>

    <!-- 查询结果部分 -->
    <div class="result-container">
      <h2 class="result-title">查询结果</h2>
      <el-table :data="devices" style="width: 100%" @row-click="goToDetail">
        <!-- 表格列定义 -->
        <el-table-column prop="id" label="设备编码"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="major" label="专业"></el-table-column>
        <el-table-column prop="unit" label="机组"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :current-page.sync="query.page" :page-size="query.size" :total="count"
          layout="total, prev, pager, next" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DeviceSearch",
  data() {
    return {
      equipment: {
        name: '',
        unit: '',
        major: '',
      },
      file: null,
      dialogVisible: false,
      detailData: [{}],
      imageUrl: '',
      count: 0,
      query: {
        id: "",
        name: "",
        major: "",
        page: 1,
        size: 5
      },
      devices: [
        // 省略设备数据
      ],

    };
  },
  mounted() {
    this.list = [];
    this.m1()
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },

    submitForm() {
      let formData = new FormData();  // 创建一个FormData对象
      formData.append('file', this.file); // 附加 file
      formData.append('name', this.equipment.name); // 附加 name
      formData.append('unit', this.equipment.unit); // 附加 unit
      formData.append('major', this.equipment.major); // 附加 major

      axios.post('http://localhost:9527/equipment/add', formData)
        .then(response => {
          if (response.data.success) {
            console.log('设备添加成功');
          } else {
            console.log('设备添加失败');
          }
        })
        .catch(err => {
          console.error(err);
        });
    },

    handleCurrentChange(val) {
      //当前页面改变时触发
      this.query.page = val;
      this.m1();
      console.log(`当前页: ${val}`);
      console.log(this.query.page);
      console.log(this.query);
    },
    goToDetail(row) {
      // 注意，在这个例子里，我们假设你的数据有一个唯一识别的字段名为 'id'。实际数据可能会不同。
      this.$router.push({ name: 'DeviceDetail', params: { id: row.id } })
    },
    m1() {
      let requestBody = { ...this.query };
      delete requestBody.page;
      delete requestBody.size;

      for (let prop in requestBody) {
        if (requestBody[prop] === "" || requestBody[prop] === null || requestBody[prop] === undefined) {
          // If the property is empty, delete it from the request body
          delete requestBody[prop];
        }
      }

      let requestParams = {
        page: this.query.page,
        size: this.query.size
      };

      axios.post("http://localhost:9527/equipment/page-search", requestBody, {
        params: requestParams
      })
        .then(data => {
          this.devices = data.data.data.records;
          this.count = data.data.data.total;
          console.log(data);
        })
        .catch(error => {
          console.error("post请求出错", error)
        });
    },
    resetQuery() {
      // 重置查询条件
      this.query = {
        page: 1,
        size: 5,
        id: "",
        name: "",
        major: "",
      };
    }

  },
}
</script>

<style scoped>
.device-defect {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  margin: 0;
}

.query-form {
  margin-bottom: 20px;
}

.result-container {
  margin-top: 20px;
}

.result-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 可以继续添加其他样式来自定义界面 */
</style>
